<div class="sc-cnt-minhaconta">
    
   <div class="minha-foto">
        
        <div style="clear: both;">
            <div id="webcam" style="float: left;margin-left: 165px;border: 1px solid #ccc;"></div> 
            <div id="img" style="float: left;height:240px;width:320px; margin-left: 25px;border: 1px solid #ccc;">
                <?php
                $img = glob('public/upload/aluno/'.$this->data['ALU_ID'].'.*'); 
                if(isset($img[0])) {
                ?>
                <img src="<?php echo $this->urlbase;?>/<?php echo $img[0].'?'.rand(100, 9999); ?>" />
                <?php } ?>
            </div>
            <div style="clear: both;margin-left: 230px;padding:20px 0;">
                <p>
                    <a href="javascript:gravarfoto();" class="btn-frm">Salvar foto</a>
                    <a href="<?php echo $this->baseUrl($this->modulo.'/'); ?>" class="btn-frm">Voltar</a>
                </p>
            </div>
            
            <div class="enviar_redacao">
                <form id="form_aluno" action="" method="post" enctype="multipart/form-data">  
                    <input type="hidden" id="ALU_ID" name="ALU_ID" value="<?php echo $this->data['ALU_ID']; ?>" />
                    <strong>Enviar minha foto:</strong> <input type="file" id="ALU_FILE" name="ALU_FILE" value="" />
                    <input type="submit" name="submit" id="submitbutton" value="Salvar foto" class="btn-frm">
                </form>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="<?php echo $this->urlbase; ?>/public/media/js/webcam/jquery.webcam.js"></script>
<script>
$(function() {

	var pos = 0, ctx = null, saveCB, image = [];

	var canvas = document.createElement("canvas");
	canvas.setAttribute('width', 320);
	canvas.setAttribute('height', 240);
	
	if (canvas.toDataURL) {
            ctx = canvas.getContext("2d");
            image = ctx.getImageData(0, 0, 320, 240);
            saveCB = function(data) {
			
                var col = data.split(";");
                var img = image;

                for(var i = 0; i < 320; i++) {
                    var tmp = parseInt(col[i]);
                    img.data[pos + 0] = (tmp >> 16) & 0xff;
                    img.data[pos + 1] = (tmp >> 8) & 0xff;
                    img.data[pos + 2] = tmp & 0xff;
                    img.data[pos + 3] = 0xff;
                    pos+= 4;
                }

                if (pos >= 4 * 320 * 240) {
                    ctx.putImageData(img, 0, 0);
                    $.post(URLBASE+'/minhaconta/salvarfoto/', { type: "data", image: canvas.toDataURL("image/png") , id : <?php echo $this->data['ALU_ID']; ?> },
                    function( data ) {
                        if(data.ok){
                            $('#img').html(data.img);
                            alert('Foto gravada com sucesso!');
                        }
                        else alert('Erro ao gravar foto!');
                    }, "json");
                    pos = 0;
                }
            };

	} else {
            saveCB = function(data) {
                image.push(data);
                pos+= 4 * 320;
                if (pos >= 4 * 320 * 240) {
                    $.post('<?php echo $this->urlbase.'/'.$this->modulo; ?>/minhaconta/salvarfoto/', {type: "pixel", image: image.join('|')});
                    pos = 0;
                }
            };
	}

	$("#webcam").webcam({
            width: 320,
            height: 240,
            mode: "callback",
            swffile: "<?php echo $this->urlbase; ?>/public/media/js/webcam/jscam_canvas_only.swf",
            onSave: saveCB,
            onCapture: function() { webcam.save(); },
            debug: function (type, string) { console.log(type + ": " + string); }
	});

});
function gravarfoto(){
    loading();
    webcam.capture();
}
function loading(){
    var html = '<div id="loading"><img src="<?php echo $this->urlbase;?>/public/media/images/loader.gif" /> Carregando imagem...</div>';
    $('#img').html(html);
}
</script>
<style>#loading{ margin: 105px 0px 0px 85px; }</style>